<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart :chart-data="lineChartData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="lineChartData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :chart-data="saleThisWeekGroupByDay"
          />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {
    queryIndexStatistics, // 查询系统首页统计，
    queryOrdersForIndex,
    chargeOffVirtualOrderForIndex,
    queryLogisticsCompanys,
    deliverOrder
  } from '@/api/indexpage';
  import { listTAppletVisit } from "@/api/sms/TAppletVisit";
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {
    thisWeek, // 获取本周到当前时间的起始时间数组
    intervalDate,//计算区间内时间数组
  } from '@/utils/datecalculate';
  import {
      formatDateByFmt  //时间格式化
    } from '@/utils/index';
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData:  {},
      lineChartVisitData:  {},
      companys: [],// 物流公司
                deliveryRules: {
                  companyId: [
                    {
                      required: true,
                      message: '请选择物流公司!',
                      trigger: 'blur'
                    }
                  ],
                  waybillCode: [
                    {
                      required: true,
                      message: '请填写运单号!',
                      trigger: 'blur'
                    }
                  ]
                },  // 发货验证规则
                deliveryForm: {
                  id: 0,
                  companyId: '',//选择的物流公司id
                  waybillCode: '',
                },// 发货提交表单
                deliveryShow: false,//发货二次确认标记
                isProcess: false,// 接口是否处理中
                orderId: 0,// 订单id
                writeOffValue: '', // 核销码
                writeOffFlag: false,// 核销标记
                totalOrders: 0, // 订单总记录数
                todayVisit:0,// 今日访问
                newCustomerToday: 0,//今日新增用户
                saleAmountThisWeek: 0,//本周销售额
                saleCountToday: 0,//今日店铺销售量
                saleAmountToday: 0, //今日店铺销售额
                newCustomerCountThisWeek: [0, 0, 0, 0, 0, 0, 0],//新增用户数组
                visitList: [0, 0, 0, 0, 0, 0, 0],//新增用户数组
                saleCountThisWeekGroupByDay: [0, 0, 0, 0, 0, 0, 0],//本周店铺销售量数组
                saleAmountThisWeekGroupByDay: [0, 0, 0, 0, 0, 0, 0],//本周店铺销售额
                consignmentDialogVisible: false,
                listLoading: true,
                orgOptions: {},
                orgOptions1: {},
                orgOptions2: {},
                saleThisWeekGroupByDay: {},
                orders: []
    }
  },
  created() {


        },
  methods: {

          listTAppletVisit() {
                listTAppletVisit( {pageNum: 0,pageSize: 10}).then(response => {
                  this.TAppletVisitList = response.rows;
                 //初始化本周新增用户曲线图
                                           let thisWeekCustomer = response.newCustomerThisWeekGroupByDay;
                                           for (let i = 0; i < thisWeekCustomer.length; i++) {
                                             let index = thisWeekArray.indexOf(formatDateByFmt(new Date(thisWeekCustomer[i].newCustomerTime), 'yyyy-MM-dd'));
                                             if (index > -1) {
                                               this.newCustomerCountThisWeek.splice(index, 1, thisWeekCustomer[i].newCustomerNum)
                                             }
                                           }

                                           //初始化本周店铺销售量曲线图
                                           let sale = response.saleAmountThisWeekGroupByDay;
                                           for (let i = 0; i < sale.length; i++) {
                                             let index = thisWeekArray.indexOf(formatDateByFmt(new Date(sale[i].newOrderTime), 'yyyy-MM-dd'));
                                             if (index > -1) {
                                               this.saleAmountThisWeekGroupByDay.splice(index, 1, sale[i].salesVolume)
                                             }
                                           }
                });
              },
            //初始化曲线图
                        initGraph(response) {
                          let startEndTime = thisWeek();
                          let thisWeekArray = intervalDate(startEndTime[0], startEndTime[1]);

                          //初始化本周新增用户曲线图
                          let thisWeekCustomer = response.newCustomerThisWeekGroupByDay;
                          for (let i = 0; i < thisWeekCustomer.length; i++) {
                            let index = thisWeekArray.indexOf(formatDateByFmt(new Date(thisWeekCustomer[i].newCustomerTime), 'yyyy-MM-dd'));
                            if (index > -1) {
                              this.newCustomerCountThisWeek.splice(index, 1, thisWeekCustomer[i].newCustomerNum)
                            }
                          }

                          //初始化本周店铺销售量曲线图
                          let sale = response.saleAmountThisWeekGroupByDay;
                          for (let i = 0; i < sale.length; i++) {
                            let index = thisWeekArray.indexOf(formatDateByFmt(new Date(sale[i].newOrderTime), 'yyyy-MM-dd'));
                            if (index > -1) {
                              this.saleCountThisWeekGroupByDay.splice(index, 1, sale[i].salesVolume)
                            }
                          }

                          //初始化本周店铺销售额曲线图
                          let saleAmount = response.saleAmountThisWeekGroupByDay;

                          for (let i = 0; i < saleAmount.length; i++) {
                         let index = thisWeekArray.indexOf(formatDateByFmt(new Date(saleAmount[i].newOrderTime), 'yyyy-MM-dd'));

                            if (index > -1) {
                              this.saleAmountThisWeekGroupByDay.splice(index, 1, saleAmount[i].salesAmount)
                            }
                          }
                        this.saleThisWeekGroupByDay.saleAmountThisWeekGroupByDay=this.saleAmountThisWeekGroupByDay;
                        this.saleThisWeekGroupByDay.saleCountThisWeekGroupByDay=this.saleCountThisWeekGroupByDay;
                        this.lineChartData.saleAmountThisWeekGroupByDay=this.saleAmountThisWeekGroupByDay;
                        this.lineChartData.saleCountThisWeekGroupByDay=this.saleCountThisWeekGroupByDay;



                        },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
